<script>
import axios from "axios";

export default {
  name: "axiosPage",
  data() {
    return {
      src: '',
      courseList: [],
      boutiqueCourseList: []

    }
  },
  methods: {
    getCourseList(type) {
     return axios.post('https://wkt.myhope365.com//weChat/applet/course/list/type', {
        type,
        pageNum: 1,
        pageSize: 5,

      }, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
    }
  },
  created() {
    // axios.post('https://wkt.myhope365.com//weChat/applet/course/list/type',{
    //   type:'free',
    //   pageNum:1,
    //   pageSize:5,
    //
    // },{headers:{
    //     'Content-Type': 'application/x-www-form-urlencoded'
    //   }
    // }).then(res=>{
    //   console.log(res)
    //   this.courseList=res.data.rows
    // })
    this.getCourseList('free').then(res => {
      this.courseList = res.data.rows
    })
    this.getCourseList('boutique').then(res => {
      this.boutiqueCourseList = res.data.rows
    })
  }

}
</script>

<template>
<div>
  <div class="container">
    <div class="course" v-for="item in courseList" :key="item.courseId">
      <div>
        <img :src="item.coverFileUrl" alt="">
      </div>
      <div>
        {{ item.courseTitle }}
      </div>
      <div>
        {{ item.learningNum }}
      </div>
      <div>
        免费
      </div>

    </div>
  </div>


  <div class="container">
    <div class="course" v-for="item in boutiqueCourseList" :key="item.courseId">
      <div>
        <img :src="item.coverFileUrl" alt="">
      </div>
      <div>
        {{ item.courseTitle }}
      </div>
      <div>
        {{ item.learningNum }}
      </div>
      <div v-if="item.isFree==='1'">
        免费
      </div>
      <div v-else-if="item.isDiscount==='1'">
        <del> {{item.coursePrice}}</del>{{item.discountPrice}}
      </div>
      <div v-else>
        {{item.coursePrice}}
      </div>

    </div>
  </div>
</div>


</template>

<style scoped lang="less">
.container {
  display: flex;
  justify-content: space-between;

  .course {
    width: 18%;

    img {
      width: 100%
    }
  }
}
</style>